<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <!--灯箱插件-->
    <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">
    <script src="swipebox-master/lib/jquery.min.js"></script>
    <script src="swipebox-master/src/js/jquery.swipebox.js"></script>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="index.html"><img src="images/logo.jpg" alt="" width="45"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="class.html">分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog.html">博客</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="me-sm-2" type="search" placeholder="搜索">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <div class="menu bg-white">
            <!--选项卡-->
            <ul class="nav nav-pills my-4 p-2" id="myTab">
                <li>
                    <a class="ab" href="#pills-home" data-bs-toggle="pill">2030年</a>
                </li>
                <li>
                    <a class="" href="#pills-profile" data-bs-toggle="pill">2029年</a>
                </li>
                <li>
                    <a class="" href="#pills-contact" data-bs-toggle="pill">2028年</a>
                </li>
                <li>
                    <a href="#">更多</a>
                </li>
            </ul>
        </div>
        <!--选项卡内容-->
        <div class="tab-content">
            <div class="tab-pane fade show active" id="pills-home">
                <div class="row list">
                    <div class="col-4">
                        <a href="images/002.jpg" class="swipebox" title="2030年">
                            <img src="images/002.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/003.jpg" class="swipebox" title="2030年">
                            <img src="images/003.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/004.jpg" class="swipebox" title="2030年">
                            <img src="images/004.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/005.jpg" class="swipebox" title="2030年">
                            <img src="images/005.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/006.jpg" class="swipebox" title="2030年">
                            <img src="images/006.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/012.jpg" class="swipebox" title="2030年">
                            <img src="images/012.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-profile">
                <div class="row list">
                    <div class="col-4">
                        <a href="images/007.jpg" class="swipebox" title="2029年">
                            <img src="images/007.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/008.jpg" class="swipebox" title="2029年">
                            <img src="images/008.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/009.jpg" class="swipebox" title="2029年">
                            <img src="images/009.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/014.jpg" class="swipebox" title="2029年">
                            <img src="images/014.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/011.jpg" class="swipebox" title="2029年">
                            <img src="images/011.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-contact">
                <div class="row list">
                    <div class="col-4">
                        <a href="images/012.jpg" class="swipebox" title="2028年">
                            <img src="images/012.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/015.jpg" class="swipebox" title="2028年">
                            <img src="images/015.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/010.jpg" class="swipebox" title="2028年">
                            <img src="images/010.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/013.jpg" class="swipebox" title="2028年">
                            <img src="images/013.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="images/001.jpg" class="swipebox" title="2028年">
                            <img src="images/001.jpg" alt="image" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 绑定了.swipebox类
    jQuery(function ($) {
        $(".swipebox").swipebox({
            useCSS: true, // false将强制使用的jQuery的动画
            useSVG: true, // false强制对按钮使用png
            initialIndexOnArray: 0, // false强制对按钮使用png
            hideCloseButtonOnMobile: false, // true将隐藏移动设备上的关闭按钮
            removeBarsOnMobile: true, // false将在移动设备上显示顶部栏
            hideBarsDelay: 3000, // 延迟之前隐藏在桌面上的酒吧
            loopAtEnd: false // true将在到达最后一个图像后返回到第一个图像
        });
    });
</script>
<script>
    $(function () {
        $("#myTab li").click(function () {
            $(this).find("a").addClass("ab")
            $(this).siblings().find("a").removeClass("ab")
        })
    })
</script>

</html>